<template>
  <el-dialog title="会员详情" :visible.sync="visible" v-if="visible">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="info" title="个人信息">
        <el-descriptions :column="2" border>
          <el-descriptions-item label="手机号">
            {{vip.phone}}
          </el-descriptions-item>
          <el-descriptions-item label="头像">
            <img :src="baseImage+vip.avatar" alt="" style="display: block;height: 100px;width: 100px;border-radius: 50%;overflow: hidden;">
          </el-descriptions-item>
          <el-descriptions-item label="昵称">
            {{vip.name}}
          </el-descriptions-item>
          <el-descriptions-item label="性别">
            <span v-if="vip.sex === 1">男</span>
            <span v-else-if="vip.sex === 2">女</span>
            <span v-else>未选择</span>
          </el-descriptions-item>
          <el-descriptions-item label="出生日期">
            {{vip.birthday}}
          </el-descriptions-item>
          <el-descriptions-item label="微信标识">
            {{vip.openId}}
          </el-descriptions-item>
          <el-descriptions-item label="个性签名">
            {{vip.profile}}
          </el-descriptions-item>
        </el-descriptions>
      </el-collapse-item>
      <el-collapse-item name="like" title="收藏列表">
        <el-table border :data="likeList">
          <el-table-column label="收藏图书" prop="book.bookName" show-overflow-tooltip align="center"/>
          <el-table-column label="收藏时间" prop="likeTime" align="center"/>
        </el-table>
        <el-pagination hide-on-single-page :current-page="likePageInfo.page" :page-size="likePageInfo.limit" :page-sizes="[5,10,20,50,100]" @current-change="likePageChange" @size-change="likeSizeChange" layout="total,sizes,prev,pager,next,jumper" :total="likePageInfo.total"/>
      </el-collapse-item>
      <el-collapse-item name="comment" title="评论列表">
        <el-table border :data="commentList">
          <el-table-column label="评论图书" prop="book.bookName" show-overflow-tooltip align="center"/>
          <el-table-column label="评论内容" prop="content" show-overflow-tooltip align="center"/>
          <el-table-column label="评论时间" prop="commentTime" align="center"/>
        </el-table>
        <el-pagination hide-on-single-page :current-page="commentPageInfo.page" :page-size="commentPageInfo.limit" :page-sizes="[5,10,20,50,100]" @current-change="commentPageChange" @size-change="commentSizeChange" layout="total,sizes,prev,pager,next,jumper" :total="commentPageInfo.total"/>
      </el-collapse-item>
      <el-collapse-item name="record" title="阅读记录">
        <el-table border :data="recordList">
          <el-table-column label="阅读图书" prop="book.bookName" show-overflow-tooltip align="center"/>
          <el-table-column label="图书章节" prop="catalog.catalogName" show-overflow-tooltip align="center"/>
          <el-table-column label="阅读时间" prop="readTime" align="center"/>
        </el-table>
        <el-pagination hide-on-single-page :current-page="recordPageInfo.page" :page-size="recordPageInfo.limit" :page-sizes="[5,10,20,50,100]" @current-change="recordPageChange" @size-change="recordSizeChange" layout="total,sizes,prev,pager,next,jumper" :total="recordPageInfo.total"/>
      </el-collapse-item>
      <el-collapse-item name="feedback" title="反馈记录">
        <el-table border :data="feedbackList">
          <el-table-column label="反馈内容" prop="content" show-overflow-tooltip align="center"/>
          <el-table-column label="反馈时间" prop="createTime" align="center"/>
          <el-table-column label="回复内容" prop="reply" show-overflow-tooltip align="center"/>
          <el-table-column label="回复时间" prop="updateTime" align="center"/>
        </el-table>
        <el-pagination hide-on-single-page :current-page="feedbackPageInfo.page" :page-size="feedbackPageInfo.limit" :page-sizes="[5,10,20,50,100]" @current-change="feedbackPageChange" @size-change="feedbackSizeChange" layout="total,sizes,prev,pager,next,jumper" :total="feedbackPageInfo.total"/>
      </el-collapse-item>
    </el-collapse>
  </el-dialog>
</template>
<script>
export default {
  name: 'VipInfo',
  data () {
    return {
      activeName: 'info',
      visible: false,
      vip: {},
      baseImage: process.env.VUE_APP_URL,
      commentList: [],
      commentPageInfo: { page: 1, limit: 5, total: 0 },
      likeList: [],
      likePageInfo: { page: 1, limit: 5, total: 0 },
      recordList: [],
      recordPageInfo: { page: 1, limit: 5, total: 0 },
      feedbackList: [],
      feedbackPageInfo: { page: 1, limit: 5, total: 0 }
    }
  },
  methods: {
    init (vipId) {
      this.$http.get('vip/info/' + vipId).then(data => {
        if (data) {
          this.visible = true
          this.vip = { ...data }
          this.getCommentList()
          this.getLikeList()
          this.getRecordList()
          this.getFeedbackList()
        }
      }).catch(() => {})
    },
    getCommentList () {
      this.commentPageInfo.vipId = this.vip.vipId
      this.$http.get('vip/comment/page', this.commentPageInfo).then(data => {
        if (data) {
          this.commentList = [...data.records]
          this.commentPageInfo.total = data.total
        }
      }).catch(() => {})
    },
    getLikeList () {
      this.likePageInfo.vipId = this.vip.vipId
      this.$http.get('vip/like/page', this.likePageInfo).then(data => {
        if (data) {
          this.likeList = [...data.records]
          this.likePageInfo.total = data.total
        }
      }).catch(() => {})
    },
    getRecordList () {
      this.recordPageInfo.vipId = this.vip.vipId
      this.$http.get('vip/record/page', this.recordPageInfo).then(data => {
        if (data) {
          this.recordList = [...data.records]
          this.recordPageInfo.total = data.total
        }
      }).catch(() => {})
    },
    getFeedbackList () {
      this.feedbackPageInfo.userId = this.vip.vipId
      this.$http.get('vip/feedback/page', this.feedbackPageInfo).then(data => {
        if (data) {
          this.feedbackList = [...data.records]
          this.feedbackPageInfo.total = data.total
        }
      }).catch(() => {})
    },
    likePageChange (val) {
      this.likePageInfo.page = val
      this.getLikeList()
    },
    likeSizeChange (val) {
      this.likePageInfo.limit = val
      this.getLikeList()
    },
    commentPageChange (val) {
      this.commentPageInfo.page = val
      this.getCommentList()
    },
    commentSizeChange (val) {
      this.commentPageInfo.limit = val
      this.getCommentList()
    },
    recordPageChange (val) {
      this.recordPageInfo.page = val
      this.getRecordList()
    },
    recordSizeChange (val) {
      this.recordPageInfo.limit = val
      this.getRecordList()
    },
    feedbackPageChange (val) {
      this.feedbackPageInfo.page = val
      this.getFeedbackList()
    },
    feedbackSizeChange (val) {
      this.feedbackPageInfo.limit = val
      this.getFeedbackList()
    }
  }
}
</script>

<style scoped>

</style>
